<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
	<meta charset="UTF-8">
	<title>get</title>
	<style>
		.robot{
			margin-top: 10px;
			position: relative;
			top: 0;
			left: 0;
			width: 40px;
			height: 40px;
			border-radius: 100%;
			background: coral;
		}
	</style>
</head>
<body>
<div class="robot r1"></div>
<div class="robot r2"></div>
<div class="robot r3"></div>
<div class="robot r4"></div>
<div class="robot r5" style="display: none"></div>


<script src="js/jquery.min.js"></script>
<script src="js/velocity.min.js"></script>
<script src="js/velocity.ui.min.js"></script>
<!-- 调试器 显然并不好用 -->
<script src="https://julian.com/research/velocity/vmd.min.js"></script>
<script>
	var $r1 = $('.r1');
	var $r2 = $('.r2');
	var $r3 = $('.r3');
	var $r4 = $('.r4');

	/* 连续动画 */
	var loadingSequence = [
		{
			e: $r1,
			p:{translateX: 100},
			o:{easing:'spring'}
		},
		{
			e: $r2,
			p:{translateX: 200},
			o:{easing:'spring'}
		},
		{
			e: $r3,
			p:{translateX: 300},
			o:{easing:'spring'}
		},
		{
			e: $r4,
			p:{translateX: 200},
			o:{easing:'spring', sequenceQueue:false} // 于上一个同步执行
		}
	];
	$.Velocity.RunSequence(loadingSequence);

	/* 定义效果 */
	$.Velocity
		.RegisterEffect('shadowIn',{
			defaultDuration: 1000,
			calls:[
					[{opcity:1,scale:1},0.4],
					[{boxShadowBlur:50},0.6,{easing:'spring'}]
			]
			//reset: {opcity:0.2,scale:0.5}
		})
		.RegisterEffect('shadowOut',{
				defaultDuration: 800,
				calls:[
					[{boxShadowBlur:50},0.2],
					[{opcity:0,scale:0},0.8]
				]
		});
	$('.r5').velocity('shadowIn').velocity('shadowOut');

	$.Velocity.mock = 5; // 所有时间加倍
</script>
</body>
</html>